<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据获取</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
    <h1>Hello App</h1>
    <p>
        <router-link to="/login" tag="div">Go to Login</router-link>
        <router-link to="/foo">Go to Foo</router-link>
        <router-link to="/foo/1">Go to Foo 1</router-link>
        <router-link to="/foo/2">Go to Foo 2</router-link>
        <router-link to="/bar/1">Go to Bar 1</router-link>
        <router-link to="/bar/2">Go to Bar 2</router-link>
    </p>

    <router-view></router-view>
</div>

<script>
    const Login = {template: '<div>login</div>'}
    const Foo = {
        template:
            '<div class="post"> ' +
            '    <div class="loading" v-if="loading"> ' +
            '      Loading... ' +
            '    </div> ' +
            '    <div v-if="error" class="error"> ' +
            '      {{ error }} ' +
            '    </div> ' +
            '    <div v-if="post" class="content"> ' +
            '      <h2>{{ post.title }}</h2> ' +
            '      <p>{{ post.body }}</p> ' +
            '    </div> ' +
            '  </div>',

        data() {
            return {
                loading: 'false',
                post: {},
                error: '网络错误'
            }
        },
        created() {
            console.log('开始获取数据~')
            this.getData();
        },
        methods: {
            getData() {
                let _this = this;
                _this.loading = true;
                _this.error = _this.post = null;

                setTimeout(function () {
                    var data = [{title: '标题0', 'body': '内容0'}, {title: '标题1', 'body': '内容1'}, {title: '标题2', 'body': '内容2'}];
                    var id = _this.$route.params.id || 0;
                    _this.post = data[id];
                    _this.loading = false;
                }, 2000)
            }
        },
        watch: {
            // 如果路由有变化，会再次执行该方法
            '$route': function () {
                console.log('路由变化，开始获取数据~')
                this.getData()
            }
        }
    }
    const Bar = {template: '<div>bar</div>'}

    const routes = [
        {path: '/login', component: Login},
        {
            path: '/foo/:id',
            component: Foo
        },
        {path: '/bar/:id', component: Bar, meta: {requiresAuth: true}}
    ]

    const router = new VueRouter({
        routes
    });
    router.beforeEach((to, from, next) => {
        //使用这个方法可以检查是否有权限，没有权限跳转到登录页
        if (to.matched.some(record => record.meta.requiresAuth)) {
            // this route requires auth, check if logged in
            // if not, redirect to login page.
            if (to.params.id == 1) {
                next({
                    path: '/login',
                    query: {redirect: to.fullPath}
                })
            } else {
                next()
            }
        } else {
            next() // 确保一定要调用 next()
        }
    })

    const app = new Vue({
        router
    }).$mount("#app");
</script>
</body>
</html>
